<!-- 创建项目 -->
<template lang="html">
  <Card :bordered="false">
    <p slot="title">创建项目</p>
    <Form ref="form" :model="info" :rules="rules">
      <table id="createProgram" ref="print" width='100%' border="1" cellspacing="0" cellpadding="0">
        <tr>
          <th colspan="4">项目基本信息表</th>
        </tr>
        <tr>
          <td width="25%">项目编号</td>
          <td colspan="3">{{info.Project_number}}</td>
        </tr>
        <tr>
          <td width="25%">
            <Icon type="ios-medical" color="#ff6868" />
            项目名称
          </td>
          <td colspan="3">
            <FormItem prop="Project_name">
              <Input v-model="info.Project_name"></Input>
            </FormItem>
          </td>
        </tr>
        <tr>
          <td width="25%">
            <Icon type="ios-medical" color="#ff6868" />
            建设单位
          </td>

          <td colspan="3">
            <FormItem prop="Build_unit">
              <Input v-model="info.Build_unit"></Input>
            </FormItem>
          </td>
        </tr>
        <tr>
          <td width="25%">
            法人
          </td>
          <td width="25%">
            <Input v-model="info.Legal_person"></Input>
          </td>
          <td width="25%">
            <Icon type="ios-medical" color="#ff6868" />
            联系人
          </td>
          <td>
            <FormItem prop="Linkman">
              <Input v-model="info.Linkman"></Input>
            </FormItem>
          </td>
        </tr>
        <tr>
          <td width="25%">
            通讯地址
          </td>
          <td colspan="3">
            <Row>
              <Col span="4">
              <!-- 省 -->
              <Select v-model="MailingAddress.sheng" @on-change="shengIndex(MailingAddress.sheng)" placeholder="省份">
                <Option v-for="(item, index) in MailingAddress.selectsheng" :key="index" :value="item.name">
                  {{item.name}}
                </Option>
              </Select>
              </Col>
              <Col span="4">
              <!-- 市 -->
              <Select v-model="MailingAddress.shi" @on-change="shiIndex(MailingAddress.shi)" placeholder="城市">
                <Option v-for="(itemCity, cindex) in MailingAddress.shiList" :value="itemCity.name" :key="cindex">
                  {{itemCity.name}}
                </Option>
              </Select>
              </Col>
              <Col span="4">
              <!-- 县城 -->
              <Select v-model="MailingAddress.xian" placeholder="县区">
                <Option v-for="(itemXian,xIndex) in MailingAddress.xianList" :value="itemXian" :key="xIndex">
                  {{itemXian}}
                </Option>
              </Select>
              </Col>
              <Col span="10" offset="2">
              <Input v-model="MailingAddress.detailedAddress" placeholder="详细地址" />
              </Col>
            </Row>
          </td>
        </tr>

        <tr>
          <td width="25%">
            <Icon type="ios-medical" color="#ff6868" />
            联系电话
          </td>
          <td width="25%">
            <FormItem prop="Tel_number">
              <Input v-model="info.Tel_number"></Input>
            </FormItem>
          </td>
          <td width="25%">
            邮政编码
          </td>
          <td>
            <Input v-model="info.Mail_zip_code"></Input>
          </td>
        </tr>

        <tr>
          <td width="25%">
            <Icon type="ios-medical" color="#ff6868" />
            建设地点
          </td>
          <td colspan="3">
            <Row>
              <Col span="4">
              <!-- 字段没对照 -->
              <FormItem prop="Build_address_shengA">
                <Select v-model="info.Build_address_shengA" @on-change="shengIndex(info.Build_address_shengA)"
                  placeholder="省份">
                  <Option v-for="(item, index) in MailingAddress.selectsheng" :value="item.name" :key="index">
                    {{item.name}}
                  </Option>
                </Select>
              </FormItem>
              </Col>
              <Col span="4">
              <FormItem prop="Build_address_shiA">
                <Select v-model="info.Build_address_shiA" @on-change="shiIndex(info.Build_address_shiA)" placeholder="城市">
                  <Option v-for="(itemCity,cindex) in MailingAddress.shiList" :value="itemCity.name" :key="cindex">
                    {{itemCity.name}}
                  </Option>
                </Select>
              </FormItem>
              </Col>
              <Col span="4">
              <FormItem prop="Build_address_xianA">
                <Select v-model="info.Build_address_xianA" placeholder="县区">
                  <Option v-for="(itemXian,xIndex) in MailingAddress.xianList" :value="itemXian" :key="xIndex">
                    {{itemXian}}
                  </Option>
                </Select>
              </FormItem>
              </Col>
              <Col span="10" offset="2">
              <FormItem prop="Build_address_detailedA">
                <Input v-model="info.Build_address_detailedA" placeholder="详细地址"></Input>
              </FormItem>
              </Col>
            </Row>
          </td>
        </tr>

        <tr>
          <td width="25%">
            <Icon type="ios-medical" color="#ff6868" />
            建设性质
          </td>
          <td colspan="3">
            <FormItem prop="Bulid_property">
              <RadioGroup v-model="info.Bulid_property">
                <Radio label="新建">
                  <span>新建</span>
                </Radio>
                <Radio label="扩建">
                  <span>扩建</span>
                </Radio>
                <Radio label="改建">
                  <span>改建</span>
                </Radio>
              </RadioGroup>
            </FormItem>
          </td>
        </tr>

        <tr>
          <td width="25%">
            占地面积(平方米)
          </td>
          <td width="25%">
            <Input v-model="info.Floor_space"></Input>
          </td>
          <td width="25%">
            绿化面积(平方米)
          </td>
          <td>
            <Input v-model="info.Green_space"></Input>
          </td>
        </tr>

        <tr>
          <td width="25%">
            总投资(万元)
          </td>
          <td width="25%">
            <Input v-model="info.Total_investment"></Input>
          </td>
          <td width="25%">
            环评合同额（万元）
          </td>
          <td>
            <Input v-model="info.Contract_amount"></Input>
          </td>
        </tr>

        <tr>
          <td width="25%">
            产品名称
          </td>
          <td width="25%">
            <FormItem prop="Product_name">
              <Input v-model="info.Product_name"></Input>
            </FormItem>
          </td>
          <td width="25%">
            生产规模
          </td>
          <td>
            <FormItem prop="Production_scale">
              <Input v-model="info.Production_scale"></Input>
            </FormItem>
          </td>
        </tr>

      </table>
    </Form>
    <Row style="padding:20px 0">
      <Col span="4">
      <PrintButton v-if="flag" Url="print/printProject" :Project_id="info.Id"></PrintButton>
      </Col>
      <Col span="20" style="text-align:right">
      <Button type="primary" @click="submit('save')">保存</Button>
      <Button @click="submit('submit')" type="primary">提交</Button>
      </Col>
    </Row>
    <StepBar :current="0" />
  </Card>
</template>
<script>
  import cityList from '../../../libs/city.js'
  export default {
    data() {
      return {
        flag: false,
        info: {
          Project_number: '加载中',
        },
        rules: {
          Project_name: {
            required: true,
            trigger: 'blur',
            message: '项目名称不能为空',
          },
          Build_unit: {
            required: true,
            trigger: 'blur',
            message: '建设单位不能为空',
          },
          Linkman: {
            required: true,
            trigger: 'blur',
            message: '联系人不能为空',
          },
          Tel_number: {
            required: true,
            trigger: 'blur',
            message: '联系电话不能为空',
          },
          Bulid_property: {
            required: true,
            trigger: 'change',
            message: '建设性质不能为空',
          },
          Build_address_shiA: {
            required: true,
            trigger: 'change',
            message: ' ',
          },
          Build_address_shengA: {
            required: true,
            trigger: 'change',
            message: ' ',
          },
          Build_address_xianA: {
            required: true,
            trigger: 'change',
            message: ' ',
          },
          Build_address_detailedA: {
            required: true,
            trigger: 'blur',
            message: '建设性质不能为空',
          },
        },
        MailingAddress: {
          selectsheng: cityList,
          shiList: {},
          xianList: {},
          detailedAddress: null,
          sheng: null,
          shi: null,
          xian: null,
        },
      }
    },
    created() {
      if (this.$route.query.Project_id) {
        this.getProject(this.$route.query.Project_id)
      } else {
        this.getItemNumber()
      }
    },

    methods: {
      getItemNumber() {
        axios.get('/projectInformation/getProjectNumber').then((res) => {
          this.info.Project_number = res.project_number
          this.flag = true
        })
      },
      // 保存 save / 提交 submit
      submit(type) {
        // 验证
        this.$refs.form.validate((valid) => {
          if (!valid) {
             return
          }
          let info = this.info,
            MailingAddress = this.MailingAddress

          info.btn_way = type == 'save' ? 1 : 2
          info.Perject_type = type == 'save' ? 1 : 1
          // 通讯地址
          info.Mail_address = [
            MailingAddress.sheng,
            MailingAddress.shi,
            MailingAddress.xian,
            MailingAddress.detailedAddress,
          ].join('--')

          // 建设地点
          info.Build_address = [
            info.Build_address_shengA,
            info.Build_address_shiA,
            info.Build_address_xianA,
            info.Build_address_detailedA,
          ].join('--')

          axios.post('/projectInformation/saveOrUpdateProject', info).then((res) => {
            let title = res._MESSAGE
            if (res._STATUS == 1) {
              if (type == 'save') {
                this.$Modal.success({
                  title,
                })
              } else {
                if (typeof (this.info.IsAssign) == "undefined" || this.info.IsAssign == 0) {
                  this.$Modal.success({
                    title: '等待分配中',
                  });
                } else {
                  this.$Modal.success({
                    title: '分配完已完成',
                  });
                }
              }
            } else {
              // 提示
              this.$Modal.error({
                title,
              })
            }
          }).catch(err => {
            alert('请求崩溃')
          })

        })
      },
      // 获取市
      shengIndex(shengName) {
        console.log(shengName)
        let selectsheng = this.MailingAddress.selectsheng;
        for (let i = 0; i < Object.keys(selectsheng).length; i++) {
          if (selectsheng[i].name == shengName) {
            this.MailingAddress.shiList =
              selectsheng[i].cityList;
          }
        }
      },
      //获区
      shiIndex(cityName) {
        let selectShi = this.MailingAddress.shiList;
        for (let i = 0; i < Object.keys(selectShi).length; i++) {
          if (selectShi[i].name == cityName) {
            this.MailingAddress.xianList =
              selectShi[i].areaList;
          }
        }
      },
      /* 获取当前创建项目 */
      getProject(id) {
        axios.get('/projectInformation/findProjectByID', {
          params: {
            id
          }
        }).then(res => {
          this.info = res.info
          localStorage.projectType = this.info.Perject_type
          this.flag = true
          console.log(res)
        }).catch(err => {
          /* this.$router.push({
            name: "index"
          }) */
        })
      },
    }
  }
</script>
<style lang="less">
  .ivu-form-item {
    margin-bottom: 0 !important;
  }

  #createProgram {
    .ivu-input {
      border: none !important;
      text-align: center;

      // height: 30px;
      input {
        outline: medium;
      }
    }
  }
</style>